import React from 'react';
import { Outlet } from 'react-router-dom';
import { Layout } from 'antd';
import { Menu } from 'antd';
import { useNavigate } from 'react-router-dom'
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Image } from 'antd';

import '../styles/Index.scss'

const { Header, Content } = Layout;

// 用interface声明对象类型
interface Props {

}

interface MenuItem {
    item: object
    key: string
}
function Index(props: Props) {
    var navigate = useNavigate();
    var handleClick = function ({ item, key }: MenuItem) {
        navigate(key);
    }

    var handle = () => {
        localStorage.removeItem('token');
        localStorage.removeItem('userinfo'); //删除userinfo
        navigate('/login');
    }
    return (
        <div className='index'>
            {/* Outlet 充当路由组件的渲染出口(占位) */}
            <Layout>
                <Header className='myheader'>
                    <div className="left">
                        {/* logo */}
                        <img src="https://img1.baidu.com/it/u=1927960585,2951415267&fm=253&fmt=auto&app=138&f=JPEG?w=684&h=500
" alt="" />
                        <span> 三棵树客服中心</span>
                        {/* 水平导航菜单 */}
                        <Menu theme='light' mode="horizontal" defaultSelectedKeys={['/index/home']} onClick={handleClick}>
                            <Menu.Item key="/index/home" >首页</Menu.Item>
                            <Menu.Item key="/index/servicecenter" >服务中心</Menu.Item>
                            <Menu.Item key="/index/staffcenter" >员工中心</Menu.Item>
                            <Menu.Item key="/index/custommange" >客户管理</Menu.Item>
                            <Menu.Item key="/index/systemmange" >系统管理</Menu.Item>
                        </Menu>
                    </div>
                    <div className="right">
                        <span>客服工作台</span>
                        <Avatar src={<Image src="https://img0.baidu.com/it/u=1250551608,2180019998&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1669222800&t=3fa050e1f01940f77bd68db64dee2eb9" style={{ width: 32 }} />} />
                        <span onClick={handle} style={{ color: 'blue' }}>退出登录</span>
                    </div>
                </Header>
                <Content><Outlet /></Content>
            </Layout>
        </div>
    );
}

export default Index;